
import { reactive, ref, onMounted, inject, nextTick, defineProps } from 'vue'
import { useStore } from 'vuex'
export default function() {
    // 注入全局utils工具js
    const $utils = inject('$utils')
    // 定义store
    const store = useStore()
    // 设置行的颜色，空值为默认值
    const rowStyle = reactive({ id: '', color: '' })
  
    // 定义子组件的ref
    const data_detail = ref()
    const jmcanvas = ref()
  
    // *********************************定义变量**********************************
    // 页眉
    const breadcrumb = ref(['测试小标题'])
    // 是否开启详细查询
    const isshowdrawer = ref(false)
    // 筛选条件分布
    const filterData = ref({
      userName: [
        { text: '测试1', value: '测试1' }, 
        { text: '测试2', value: '测试2' }
      ]
    })
    // 定义table的ref绑定
    const tableRef = ref()
    // 筛选条件
    const searchData = ref({
      pageIndex: 1,
      pageSizes: [30, 100, 200, 300, 400],
      pageSize: 30,
      totalItemCount: 100,
      keyWord: ''
    })
    // 批量选择的数据
    const chooseTableData = ref()
    // 初始化表格数据
    const tableData = ref([])
    // 是否开启弹窗
    const openDialog = ref(false)
    // 是否开启绘制板弹窗
    const openCanvasDialog = ref(false)
    // ***************************************************************************
  
    // 进入该模块执行的方法
    const onMountedHook = function () {
      console.log('进入该modal模块执行的方法')
      if (store.state.isOldRouter || store.state.routerMode_refrash) {
        getData()
      }
    }
  
    // ****************************************************************************
    // ------------------ 右键菜单事件 ---------------------------
    function rowContextMenu(row, column, event) {
      event.preventDefault()
      // console.log(event)
      // console.log(row)
      // console.log(column)
      rowStyle.id = row.id
      store.commit('set_pop_attr', {
        pop_show: true, 
        get_event: event
      })
    }
    // ----------------- 右键点击选择菜单事件 -------------------------
    function contextMenuClick() {
      store.commit('set_pop_attr', {
        pop_show: false
      })
    }
    // **************************************************************************
  
    // ******************************绘制板方法**************************************
    // 打开绘制板
    async function openCanvasDialogFn() {
      openCanvasDialog.value = true
      // 等待组件渲染完成
      await nextTick()
      jmcanvas.value.initData()
    }
    // 保存绘制板方法
    function saveCanvasData() {
      jmcanvas.value.submitData()
    }
    // 关闭绘制板
    function closeCanvasDialog() {
      jmcanvas.value.leaveView()
      openCanvasDialog.value = false
    }
    // **************************************************************************
  
    // 保存数据提交方法
    function saveData() {
      data_detail.value.submitData()
    }
    // 查询第一页数据方法
    function btnSearch() {
      searchData.value.pageIndex = 1
      getData()
    }
    // 获取数据方法
    function getData() {
      tableData.value = []
      for (let i = 0; i < 40; i++) {
        tableData.value.push({
          userName: '测试' + i,
          id: i
        })
      }
        
        // $utils.post({
        //   url: '',
        //   params: searchData,
        //   ok: function (res) {
        //     console.log('SysUser')
        //     console.log(res)
        //     tableData.value = res.data
        //     searchData.totalItemCount = res.paged.totalCount
        //   }
        // })
    }
    // 新建列表方法
    async function addData() {
      openDialog.value = true
      await nextTick()
    }
    // 编辑数据方法
    async function handleEdit() {
      openDialog.value = true
      // 等待组件渲染完成
      await nextTick()
      // 查询详情数据
      const data = await getPageData()
      data_detail.value.initData({
        data: {
          orderCode: '123123',
          styleNo: '',
          buildDate: '',
          style:''
        }
      })
    }
    // 删除数据方法
    function handleDelete(item, flag) {
      // 删除方法相应的字段
      const del_Id = 'id'
      const ids = []
      if (flag == 0) {
        item.forEach(item => {
          ids.push(item[del_Id])
        })
      } else {
        ids.push(item[del_Id])
      }
      // $utils.post({
      //   url: '',
      //   params: { ids: ids },
      //   confirm: true,
      //   showLoading: true,
      //   ok: function (data) {
      //     console.log(data)
      //     getData()
      //   }
      // })
    }
    // 批量删除数据方法
    function deletechoose() {
      if (chooseTableData.value.length == 0) {
        $utils.message({
          showClose: true,
          center: true,
          message: '请选择操作数据',
          type: 'warning'
        })
      } else {
        handleDelete(chooseTableData.value, 0)
      }
    }
    function getPageData() {
      // return $utils.post({
      //   url: '',
      //   params: { 
      //     username: '',
      //     password: ''
      //   },
      //   showLoading: true,
      //   noasync: true
      // })
    }
    // ====================== 关闭弹窗事件 ===========================
    function beforeClose(done, flag) {
      if (flag || store.state.close_showtip) {
        $utils.showCloseTip(function () {
          done()
          getData()
        })
      } else {
        done()
        getData()
      }
    }
    function closeDialog() {
      openDialog.value = false
      getData()
    }
    // *******************************修改分页*******************************
    // 改变每页条数方法
    function handleSizeChange(val) {
      searchData.value.pageSize = val
      getData()
    }
    // 改变页数方法
    function handleCurrentChange(val) {
      searchData.value.pageIndex = val
      getData()
    }
    // **************************************************************
  
    // *******************************Table操作*******************************
    // 多选数据
    function handleSelectionChange(val) {
      chooseTableData.value = val
    }
    // 行单击事件
    function rowClick(row, column, e) {
      rowStyle.id = row.id
    }
    // 标题头筛选
    function filterChange(filters) {
      const key = Object.keys(filters)[0]
      searchData.value[key] = filters[key]
      getData()
    }
    // 行双击事件
    function cellDBClick(row, column, cell, event) {
      handleEdit(1, row)
    }
    // 排序筛选
    function sortChange(obj) {
      if (!obj.prop) {
        searchData.value.orderBy = ''
      } else {
        searchData.value.orderBy = obj.prop + ' ' + obj.order
      }
      getData()
    }
    // 重置查询条件方法
    function reset() {
      tableRef.value.clearFilter()
      searchData.value = $utils.resetForm(searchData.value)
    }
    // **************************************************************
  
    onMounted(() => {
      onMountedHook()
    })


}